<template>
	<view class="tools_contents">
		<view class="confrim" @click="hanldeClose">
		  <image src="../../../static/confirm.png" mode=""/>
		</view>
		<view class="title">
		  {{selType==1?'宫格':'比例'}}
		</view>
		<view class="bottom_cons" >
		  <scroll-view scroll-x="true" class="scrollY">
		   <view class="bottom">
		    <view :class="['scale_cons', item.id==selIndexs?'scale_cons_active':'']" v-for="(item,index) in grid" :key="index" @click="selScale(item)">
		    <image class="icon"  :src="item.icon" mode=""/>
		    <view class="text_con">
		      {{item.text}}
		    </view>
		   </view>
		  </view>
		  </scroll-view>
		</view>
	</view>
</template>

<script>
	import {gridData,scaleData} from '../../../utils/common.js'
	export default{
		props:{
			visible:{
				type:Boolean,
				default:false
			},
			selType:{
				type:[String,Number],
				default:1
			}
		},
		data(){
			return{
				grid:[],
				selIndexs:1
			}
		},
		created() {
		},
		watch:{
			'selType':{
				handler(news){
					let data = news==1? gridData():scaleData()
					data.forEach(ite=>{
						this.grid.push(ite)
					})
					this.selIndexs = this.grid[0].id
				},
				immediate:true,
				deep:true
			}
		},
		methods:{
			selScale(data){
				console.log(data)
				this.selIndexs = data.id
				this.$emit('select',data)
			},
			hanldeClose(){
				this.$emit('update:visible',false)
			}
		}
	}
</script>

<style scoped>
	.tools_contents{
		width: 100vw;
		padding-bottom: 100rpx;
		box-sizing: border-box;
		background: #191920;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99999999;
	}
	.confrim{
	  width: 84rpx;
	  height: 56rpx;
	  position: absolute;
	  top: 16rpx;
	  right: 24rpx;
	  z-index: 99999999;
	}
	.confrim image{
	  display: block;
	  width: 84rpx;
	  height: 56rpx;
	}
	.title{
	  width: 100vw;
	  height: 88rpx;
	  font-size: 28rpx;
	  font-family: PingFangSC-Medium, PingFang SC;
	  font-weight: bold;
	  color: #DADEF1;
	  line-height: 40rpx;
	  text-align: center;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  margin-bottom: 30rpx;
	}
	.bottom_cons{
	  width: 100vw;
	  padding: 0 24rpx;
	  box-sizing: border-box;
	}
	.bottom{
	  display: flex;
	  justify-content:none;
	}
	.scale_cons{
	  width: 120rpx;
	  height: 120rpx;
	  background: #25242E;
	  border-radius: 15rpx;
	  margin-right: 30rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  flex-shrink: 0;
	}
	.bottom .scale_cons:last-child{
	  margin-right: 0;
	}
	.scale_cons_active{
	  width: 120rpx;
	  height: 120rpx;
	  background: #25242E;
	  border-radius: 15rpx;
	  border: 4rpx solid #0E5AD3;
	  box-sizing: border-box;
	  margin-right: 30rpx;
	  flex-shrink: 0;
	}
	.icon{
	  display: block;
	  width: 58rpx;
	  height: 58rpx;
	  margin: 0 auto;
	}
	.text_con{
	  font-size: 20rpx;
	  font-family: PingFangSC-Regular, PingFang SC;
	  font-weight: 400;
	  color: #9296A5;
	  line-height: 28rpx;
	  text-align: center;
	}

</style>